/**
 * @namespace Bookmark.view.List
 * @author burning <www.cafeinit.com>
 * @version 2018.12.11
 */

import React from 'react'
import { connect } from 'dva'
import EditForm from '../components/EditForm'
import ListController from './ListController'
import styles from '../style/List.css'
 

class List extends ListController {
  state = { ...this.state }

  componentDidMount() {
    console.log('componentDidMount', this.props)
    this.initData()
  }

  render() {
    const { list, editFormTitle, editFormVisible, editFormValues } = this.state

    return (
      <div className={styles.pageBody}>
        <h1 className={styles.pageTitle}>Bookmark</h1>
        <a onClick={this.handleCreateItem}>Create</a>
        {editFormVisible ? (
          <EditForm
            formTitle={editFormTitle}
            values={editFormValues}
            onCancel={this.handleEditFormOnCancel}
            onSave={this.handleEditFormOnSave}
          />
        ) : ''}
        {list.map((item, i) => (
          <div className={styles.CIListCell} key={i}>
            <div className={styles.CIListCellBody}>
              <h4>{item.title}</h4>
              <a href={item.url} target="_blank" rel="noopener noreferrer">{item.url}</a>
              <p>{item.description}</p>
            </div>
            <div className={styles.CIListCellFooter}>
              <a onClick={() => { this.handleEditItem(i, item) }}>Edit</a>
            </div>
          </div>
        ))}
      </div>
    )
  }
}

export default connect()(List)
